<link rel="stylesheet" href="../core/resource/components/swiper/swiper.min.css?v=3">
<style>
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:-0.4rem}
.swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 100%;
    background: #ffc350;
    opacity: .2;
}
.swiper-pagination-bullet-active{background:#ffc350;width:7px;opacity: 1;}
.bgbai .fui-icon-group,.bgnone .fui-icon-group {background: none}
.fui-icon-group .fui-icon-col .text {
    color: #666666;
}
.bgbai .swiper-pagination-bullet-active {
    background: #fff;
}
.bgbai .swiper-pagination-bullet {
    background: #fff;
}
.bgbai .fui-icon-group .fui-icon-col .text {
    color: #fff;
}
</style>
<div style="background:#fff;border-radius:0.5rem;margin-bottom:0.5rem;padding:0.5rem 0">
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
		<div ng-if="pagedata.fuwucate.length>0" class="fui-icon-group noborder col-5">
			<a class="fui-icon-col external" ng-if="$index<10" ng-repeat="item in pagedata.fuwucate" href="javascript:;" ng-click="access_json('/app.shop.groups//cid='+item.id)" data-nocache="true">
					<div class="icon"><img ng-src="{{tomedia(item.image) || '../addons/jy_mfuwu/resource/images/icon01.png'}}" style="border-radius:50%"></div>
					<div class="text">{{item.title}}</div>
			</a>
		</div>
	  </div>
	  <div class="swiper-slide" ng-if="pagedata.fuwucate.length>10">
		<div  class="fui-icon-group noborder col-5 radius">
			<a class="fui-icon-col external" ng-if="$index>9 && $index<20" ng-repeat="item in pagedata.fuwucate" href="javascript:;" ng-click="access_json('/app.shop.groups//cid='+item.id)" data-nocache="true">
					<div class="icon"><img ng-src="{{tomedia(item.image) || '../addons/jy_mfuwu/resource/images/icon01.png'}}" style="border-radius:50%"></div>
					<div class="text">{{item.title}}</div>
			</a>
		</div>
	  </div>
	  <div class="swiper-slide" ng-if="pagedata.fuwucate.length>20">
		<div  class="fui-icon-group noborder col-5 radius">
			<a class="fui-icon-col external" ng-if="$index>19 && $index<30" ng-repeat="item in pagedata.fuwucate" href="javascript:;" ng-click="access_json('/app.shop.groups//cid='+item.id)" data-nocache="true">
					<div class="icon"><img ng-src="{{tomedia(item.image) || '../addons/jy_mfuwu/resource/images/icon01.png'}}" style="border-radius:50%"></div>
					<div class="text">{{item.title}}</div>
			</a>
		</div>
	  </div>
	  <div class="swiper-slide" ng-if="pagedata.fuwucate.length>30">
		<div  class="fui-icon-group noborder col-5 radius">
			<a class="fui-icon-col external" ng-if="$index>29 && $index<40" ng-repeat="item in pagedata.fuwucate" href="javascript:;" ng-click="access_json('/app.shop.groups//cid='+item.id)" data-nocache="true">
					<div class="icon"><img ng-src="{{tomedia(item.image) || '../addons/jy_mfuwu/resource/images/icon01.png'}}" style="border-radius:50%"></div>
					<div class="text">{{item.title}}</div>
			</a>
		</div>
	  </div>
	</div>
	<div class="swiper-pagination"></div>
</div>
</div>
 <script>
require(['swiper'], function (Swiper) {
		var swiper = new Swiper('.swiper-container', {
			pagination: {
				el: '.swiper-pagination',
			},
		});
});
</script>